<template>
	<view class="exchangePoints">
		<view class="tabs">
			<view v-if="false" class="" @click="changeTab(1)">
				<view class="tab_name">互转商家</view>
				<view class="tab_underline">
					<view :class="{'active_color':tabsActive===1}"></view>
				</view>
			</view>
			<view class="" @click="changeTab(0) ">
				<view class="tab_name">互转个人</view>
				<view class="tab_underline">
					<view :class="{'active_color':tabsActive==0}"></view>
				</view>
			</view>
		</view>

		<view class="input_list">
			<view class="" v-if="tabsActive==1">
				<view class="input_name">互换商家ID</view>
				<input type="number" placeholder="请输入商家ID" v-model="id" placeholder-class="placeholderStyle">
			</view>

			<view class="" v-if="tabsActive==0">
				<view class="input_name">互换个人ID</view>
				<input type="number" placeholder="请输入被转人ID" v-model="userid" placeholder-class="placeholderStyle">
			</view>

			<view class="">
				<view class="input_name">互换泌豆数量</view>
				<input type="number" placeholder="请输入泌豆数" v-model="nums" placeholder-class="placeholderStyle">
			</view>
		</view>
		<view class="btn">
			<view class="" @click="onMerchantScoreChange">确认互换</view>
		</view>
	</view>

</template>

<script>
	import {
		merchantScoreChange,
		reqChange
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				userid: '',
				tabsActive: 1,
				nums: '',
				id: '',
				bid: '', //当前商家id

			};
		},
		onLoad(opt) {
			this.bid = opt.bid
			this.onReqChange('GET')
		},
		methods: {
			async onReqChange(type) {
				let dataMsg = {
					type: 1,
					id: this.tabsActive == 1 ? this.id : this.userid,
					bid: this.bid,
					value: this.nums,
					givetype: this.tabsActive == 1 ? 1 : 0
				}
				const res = await reqChange(`s=ApiZwyRequest/givemoney`, dataMsg, type)
				console.log(res, "res----")
				const {
					status,
					msg,
					data,
				} = res.data
				if (status == 1) {
					if (type == "POST") {
						this.showToast(msg)
					}
				} else {
					this.showToast(msg)
				}
			},

			changeTab(type) {
				this.tabsActive = type
				this.nums = ''
				this.id = ''
				this.userid = ''
			},
			// async onChange() {
			// 	const res = await merchantScoreChange('s=/ApiBusiness/bscorezz', {
			// 		bid: this.bid,
			// 		rid: this.id,
			// 		score: this.nums
			// 	})
			// 	const {
			// 		msg,
			// 		status
			// 	} = res.data
			// 	this.showToast(msg)
			// 	if (status == 1) {
			// 		this.goBack(2000)
			// 	}
			// 	// console.log(res,"res")
			// },
			async onMerchantScoreChange() {
				switch (true) {
					case this.id == '' && this.tabsActive == 1:
						this.showToast('请输入商家ID')
						break;
					case this.userid == '' && this.tabsActive == 0:
						this.showToast('请输入互换个人ID')
						break;
					case this.nums == '':
						this.showToast('请输入互换泌豆数量')
						break;
					case Number(this.nums) <= 0:
						this.showToast('泌豆数量须大于0')
						break;
					default:
						this.onReqChange('POST')
				}
			},
		}
	}
</script>

<style lang="scss">
	.tabs {
		height: 124upx;
		width: 100%;
		position: fixed;
		//  #ifdef APP-PLUS
		top: 0; //新增
		// #endif 
		// #ifdef H5
		top: 90rpx;
		// #endif 
		left: 0;
		z-index: 99;
		padding: 0 120upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f7f7f7;

		>view {
			.tab_name {
				font-size: 34upx;
				color: #1B1B1B;
				margin-bottom: 20upx;
			}

			.tab_underline {
				display: flex;
				justify-content: center;

				>view {
					width: 52upx;
					height: 10upx;
					border-radius: 4upx;
				}

				.active_color {
					background-color: #41644A;
				}
			}
		}
	}

	page {
		background-color: #F7F7F7;
	}

	.exchangePoints {
		padding-top: 20upx;

		.input_list {
			padding-top: 124upx;
			background-color: #fff;
			margin-bottom: 100upx;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32upx 40upx 32upx 30upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #F7F7F7;

				.input_name {
					font-size: 30upx;
				}

				input {
					font-size: 26upx;
					flex: 1;
					margin-left: 20upx;
					text-align: right;
				}

				.placeholderStyle {
					color: #B3B3B3;
				}
			}
		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 0 20upx;
			box-sizing: border-box;

			>view {
				width: 100%;
				height: 86upx;
				background-color: #41644A;
				border-radius: 20upx;
				line-height: 86upx;
				text-align: center;
				font-size: 32upx;
				color: #FFFFFF;
			}
		}
	}
</style>
<!-- 	<view class="exchangePoints">
		<view class="input_list">
			<view class="">
				<view class="input_name">兑换人ID</view>
				<input type="text" placeholder="请输入ID" placeholder-class="placeholderStyle">
			</view>
			<view class="">
				<view class="input_name">兑换期权数量</view>
				<input type="text" placeholder="请输入个数" placeholder-class="placeholderStyle">
			</view>
			<view class="">
				<view class="input_name">对方姓名ID</view>
				<input type="text" placeholder="请输入真实姓名" placeholder-class="placeholderStyle">
			</view>
		</view>
		<view class="btn">
			<view class="">确认兑换</view>
		</view>
	</view> -->
